﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>在线调试</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="dist/css/layui.css" media="all"/>
  <link rel="stylesheet" href="css/soulTable.css" media="all"/>
  <script type="text/javascript" src="dist/layui.js"></script>
</head>
<body>
<table id="myTable" ></table>
<script type="text/html" id="myBar">
    <div>
        行拖拽: <input type="checkbox" lay-skin="switch" lay-filter="rowDragSwitch" lay-text="启用|暂停" checked>
    </div>
</script>
<script>
  // 自定义模块
  layui.config({
    base: 'ext/',   // 模块目录
    version: 'v1.5.21'
  }).extend({             // 模块别名
    soulTable: 'soulTable'
  });
  layui.use(['form', 'table','soulTable'], function () {
    var table = layui.table,
        form = layui.form,
        soulTable = layui.soulTable;

    var myTable = table.render({
        id: 'myTable',
        elem: '#myTable'
        ,url: 'http://118.178.140.168:8888/map/data/layers/demo.json'
        ,toolbar: '#myBar'
        ,rowDrag: {/*trigger: 'row',*/ done: function(obj) {
            // 完成时（松开时）触发
            // 如果拖动前和拖动后无变化，则不会触发此方法
            console.log(obj.row) // 当前行数据
            console.log(obj.cache) // 改动后全表数据
            console.log(obj.oldIndex) // 原来的数据索引
            console.log(obj.newIndex) // 改动后数据索引
        }}
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,done:function(res,curr,count){
            // 隐藏列
            $(".layui-table-box").find("[data-field='id']").css("display","none");
        }
        ,cols: [[
            {type: 'checkbox', title: '##', fixed: 'left'},
            {field: 'id', title: '序号', width:'8%' },
            {field: 'imgUrl', title: '影像', width:'20%' },
            {field: 'satellite', title: '卫星',  width:'8%'},
            {field: 'sensor', title: '传感器',  width:'8%'},
            {field: 'time', title: '采集时间', edit: 'text',  width:'20%'},
            {field: 'cloud', title: '云量',  width:'20%'},
            {field: 'resolution', title: '分辨率',minWidth: 100},
        ]]
        ,page: true
        ,done: function () {
            soulTable.render(this)
        }
    });
    form.on('switch(rowDragSwitch)', function(data){
      soulTable.suspend('myTable', 'rowDrag', !data.elem.checked)
    });
})
</script>
<style>

</style>
</body>
</html>
